<!DOCTYPE html>
<html lang="en">

<head th:replace="~{admin/_fragments :: head(~{::title})}">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <link rel="stylesheet" href="../../static/semantics-dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">

    <script src="../../static/js/mjs.js"></script>
    <script src="../../static/js/jquery-3.7.1.min.js"></script>
    <script src="../../static/semantics-dist/semantic.min.js"></script>

</head>


<nav th:replace="~{admin/_fragments :: menu(7)}"  class="ui   attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container"  >
        <div class="ui   secondary stackable menu">
            <a href="#" th:href="@{/admin/blogs}">
                <h3 class="ui  teal header item" ><i class="ui clipboard outline icon"></i>我的文章</h3></a>
            <a class="m-item m-mobile-hidden  item"  th:classapend = "${(n == 1) ? 'active' : ''}" th:href="@{/admin/blogs/input}"> <i class="ui  home icon">  </i>发文</a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 2) ? 'active' : ''}" th:href="@{/admin/todolist}"> <i class="ui tasks  icon">  </i>TODO</a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 3) ? 'active' : ''}" th:href="@{/admin/chart}"><i class="ui chart bar icon">  </i> 图表 </a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 5) ? 'active' : ''}" th:href="@{/admin/tags}"><i class="ui compass icon">  </i> 机器人</a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 4) ? 'active' : ''}" th:href="@{/admin/tags}"><i class="ui play  icon">  </i> 视频 </a>

            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 6) ? 'active' : ''}" th:href="@{/}"><i class="ui pencil icon">  </i>主页展示</a>
            <div class="right m-mobile-hidden menu">

                <div class="ui dropdown item">
                    <img class="ui avatar image" src="../../static/images/mio3.jpg" th:src="@{${session.user.avatar}}" >

                    <a href="#" class="header" th:text="${session.user.nickname}"> </a>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item" th:href="@{/admin/user}">管理账号</a>
                        <a href="#" class="item" th:href="@{/admin/logout}">退出登录</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <a href="#" class="ui menu toggle m-mobile-show   button">
        展开
        <i class="sidebar  icon m-top-right "></i>
    </a>

</nav>



<body>


<br>
<div class="  m-container-small " >

    <div class="ui container">
        <div class="ui success large  message">
            <h3>
                Hi
            </h3>
           <p th:text="${session.user.nickname}">  欢迎回来</p>
            <p>距离今年考研还有 <span id="days-remaining">0</span> 天</p>
        </div>

    </div>
</div>
<br>
<input type="hidden" name="page" th:attr="value=${page == null ? 0 : page.number}">
<div  class="m-container-small  ">
    <div class="ui container">
        <div class="ui two stackable grid">


            <div class="five wide column m-padded-tb-small ">


                <div class="flex-container">

                    <div class="ui segment"  >
                        <div class="aboutmeinfo  ui segment   ">
                            <div class=" article ">
                                <div class="ui top attached segment">
                                    <div class="ui teal header" th:text="${user.nickname}">用户名</div>
                                </div>
                                <img class="ui fluid image" src="../../static/images/mio1.png" th:src="@{${user.avatar}} ">
                            </div>

                        </div>
                        <div class="ui   segment">
                            <h5 th:text="${user.slogan}">233333</h5>

                        </div>
                        <div class="ui m-padded-lr-mini  segment">
                     <a class="ui teal  small m-padded-l r-mini  button" th:href="@{/admin/user}">编辑用户信息</a>
<!--                            <a class="ui blue    mini  button" th:href="@{/admin/aim}">编辑目标日期</a>-->

                        </div>

                    </div>
                </div>

            </div>

            <div class="eleven wide column m-padded-tb-small">
                <div class="ui top   attached segment">
                    <!--                        头部-->
                    <div class="ui middle aligned two column grid">
                        <!--                            two column 要一起 不分开-->
                        <div class="  column">
                            <h3 class="ui teal header">笔记  </h3>
                        </div>

                        <div class="   right aligned column">
                            共
                            <h2 class="ui orange header m-inline-block" th:text="${page.totalElements}">14</h2>

                            篇
                        </div>

                    </div>


                    <!--content-->

                    <div class="ui attached   segment">

                        <!--                    单独文章-->
                        <div class="ui padded segment m-padded-tb-large" th:each="blog :${page.content}">
                            <div class="ui mobile reversed stackable  grid" >

                                <div class="ui eleven wide column">


                                    <div class="flex-container">
                                        <h3 class="ui header" ><a href="#"   th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">深化单词</a></h3>
                                        <p class="m-text" th:text="|${blog.description}......|"> 深化单词理解
                                            上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                            词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                            同义词和反义词：并在写作和阅读中更灵活地运用。</p>
                                        <!--                                    引入新的参数才会让描述换行 -->
                                    </div>

                                    <div>
                                        <div class="ui grid">
                                            <div class="twelve wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img alt=""  class="ui avatar image"   th:src="@{${blog.user.avatar}}" > <!-- 头像 -->

                                                        <div class="content">
                                                            <a href="#" class="header" th:text="${blog.user.nickname}">长野原美绪</a> <!-- 名字 -->
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon" ></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2024-2-15</span>
                                                    </div> <!-- 时间 -->
                                                    <div class="item">
                                                        <i class="eye icon"></i> <span th:text="${blog.views} ">55555</span>
                                                    </div> <!-- 观看数 -->

                                                </div>
                                            </div>
                                            <div class="ui right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                                <a href="#" target="_blank" class="ui teal mini basic  left pointing label" th:text="${blog.type.name}"
                                                   th:href="@{'/types?page=' + ${0} + '&id=' + ${blog.type.id}}" >认知升级</a>

                                            </div>
                                        </div>
                                    </div>



                                </div>
                                <!--                                &lt;!&ndash;                        首图&ndash;&gt;-->

                                <div class="five wide column">
                                    <div class="image-wrapper">
                                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                            <img  src="../static/images/mio1.png" th:src="@{${blog.firstPicture}}"  alt="" class="ui img3to2   image">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!--                        </div>-->
                        </div>
                    </div>
                </div>
                <!--              footer          底部-->
                <div>
                    <div class="ui attached segment"  th:if="${page.totalPages}>1">
                        <div class="ui middle aligned two column grid">
<!--                            <div class="  column">-->
<!--                                <a href="#" th:href="@{'/admin/index?page='+${page.number+ 1}-1}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>-->
<!--                            </div>-->
<!--                            <div class=" right aligned column">-->
<!--                                <a href="#" class="ui teal basic button" th:href="@{'/admin/index?page='+${page.number +1}}"  th:unless="${page.last}">下一页</a>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>


<footer th:replace="~{admin/_fragments ::footer}" class="ui    attached segment m-padded-tb-mini m-shadow-big-up  ">


</footer>

</body>

<!--<script  src="https://cdn.jsdeliver.net/semantic-ui/2.2.4/semantic.min.js"></script>-->
<!--<script  src="https://cdn.jsdeliver.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->

</html>

<script>

    $(document).ready(function() {
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hidden');
        });
    });
    $('.ui.dropdown')
        .dropdown({
            // you can use any ui transition
            // transition: 'drop',
            on:  'hover'
        })

    function calculateDaysRemaining(targetYear, targetMonth, targetDay) {
        const targetDate = new Date(targetYear, targetMonth - 1, targetDay);
        const currentDate = new Date();

        var timeDiff = targetDate - currentDate;
        var  daysRemaining = timeDiff / (1000 * 60 * 60 * 24);

        // 确保时间差是正数
        daysRemaining=(daysRemaining<0 ? 0:daysRemaining);

        return Math.floor(daysRemaining);
    }

    const daysUntilDecember21st = calculateDaysRemaining(2025, 12, 20);
    document.getElementById('days-remaining').textContent = daysUntilDecember21st;

</script>